<template>
	<view class="orderList">
		<view class="tabs flex-between">
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="changeTab(0)">全部</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="changeTab(1)">处理中</view>
			<view class="flex-center" :class="{active:tabIndex == 2}" @click="changeTab(2)">已完成</view>
		</view>
		
		<empty title="暂无工单"></empty>
	</view>
</template>

<script>
	import Empty from '@/components/empty.vue'
	export default {
		components:{
			Empty
		},
		data() {
			return {
				tabIndex:0
			};
		},
		methods:{
			changeTab(i){
				this.tabIndex = i;
			}
		}
	}
</script>

<style lang="less">
	@color: #d4237a;
	.orderList{
		.tabs {
			background: white;
			// position: fixed;
			top: 0;
			width: 100vw;
			z-index: 10;
			view {
				width: 25%;
				font-size: 30rpx;
				font-weight: bold;
				color: #666;
				line-height: 2;
				padding-bottom: 10rpx;
		
				&.active {
					color: #000;
					position: relative;
		
					&::after {
						content: "";
						display: block;
						width: 30rpx;
						height: 4rpx;
						position: absolute;
						bottom: 5rpx;
						left: calc(50% - 15rpx);
						background: @color ;
					}
				}
			}
		
		}
		
	}
</style>
